<template>
  <div class="topNav" style="position: sticky; top: 0; z-index: 20">
    <div class="topLeft">
      <i class="iconfont icon-liebiao" @click="showList"></i>
    </div>
    <div class="topCenter">
      <!-- <span class="navBtn" @click="topTabsClick($event)">我的</span>
      <span class="navBtn active">推荐</span>
      <span class="navBtn">发现</span> -->
      <span
        @click="topTabsClick(index, $event)"
        :class="{ navBtn: true, active: centerIndex === index }"
        v-for="(item, index) in content"
        >{{ item }}</span
      >
    </div>
    <div class="topRight">
      <i class="iconfont icon-sousuo"></i>
    </div>
  </div>
  <van-popup
    position="left"
    :style="{ height: '100%', width: '30%' }"
    v-model:show="listVisible"
    >内容</van-popup
  >
</template>

<script lang="ts">
import { ref, reactive, defineComponent } from 'vue';
export default defineComponent({
  emits: ['topTabsClick'],
  props: {
    centerIndex: {
      type: Number,
      default: 1,
    },
  },
  setup(prop, { emit }) {
    const listVisible = ref(false);
    const showList = () => {
      listVisible.value = true;
    };
    const topCenterContent = reactive({
      content: ['我的', '推荐', '发现'],
    });
    const topTabsClick = (index: number | string, e: Event) => {
      emit('topTabsClick', index, e);
      // centerIndex.value = index;
    };

    return {
      ...topCenterContent,
      topTabsClick,
      listVisible,
      showList,
    };
  },
});
</script>

<style lang="scss" scoped>
.topNav {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  background: #d33a31;
  align-items: center;
  padding: 0.2rem;
  .topLeft {
    i {
      color: #fff;
    }
  }
  .topCenter {
    width: 4rem;
    display: flex;
    justify-content: space-around;
    color: #fff;
    .active {
      font-size: 0.33rem;
      font-weight: 900;
    }
  }
  .topRight {
    color: #fff;
  }
}
</style>
